import React, { Component, createRef } from 'react'

// 引入子组件
import Child from './Child'

// Props 为当前组件接收的props属性约束
type Props = {}
// 组件自身的state 的数据类型约束
type State = {
    username: string
}

export default class Father extends Component<Props, State> {
    state = {
        username: '小明'
    }
    editusername = () => {
        this.setState({
            username: '小丽'
        })
    }
    ref1 = createRef<HTMLInputElement>();
    render() {
        return (
            <div>
                <p onClick={() => this.setState({ username: '小红' })}>{this.state.username}</p>
                {/* 受控组件 */}
                <p>
                    <input type="text" value={this.state.username} onChange={(e) => {
                        this.setState({
                            username: e.target.value
                        })
                    }} />
                </p>
                {/* 非受控组件 */}
                <p>
                    <input type="text" ref={this.ref1} defaultValue={this.state.username} />
                    <button onClick={() => {
                        // 通过ref 引用对象获取节点内容
                        //第一种方式:  采用类型断言,规定this.ref1.current 的类型为 HTMLInputElement
                        // console.log((this.ref1.current as ).value);
                        // 第二种方式: 使用可选链方式
                        console.log(this.ref1.current?.value);
                    }}>提交</button>
                </p>
                {/* 使用子组件 */}
                <Child username={this.state.username} editusername={this.editusername}></Child>
            </div>
        )
    }
}